<template>
  <div class="app-container">
    <h5 class="titleInfo">付款</h5>
    <el-form class="form" ref="form"  :rules="rules" :model="form" label-width="100px">
      <el-form-item label="付款银行卡" prop="paidCard">
        <el-input v-model="form.paidCard"></el-input>
      </el-form-item>
      <el-form-item label="医院名称" prop="password">
        <span class="spanToInput">{{form.hospitalName}}</span>
      </el-form-item>
      <el-form-item label="回款单号" prop="nickName">
        <span class="spanToInput">{{form.repaymentSn }}</span>
      </el-form-item>
      <el-form-item label="应回款金额" prop="nickName">
        <span class="spanToInput">{{form.amount }}</span>
      </el-form-item>
      <el-form-item label="回款比率" prop="nickName">
        <span class="spanToInput" v-if="form.ratio">{{form.ratio }}%</span>
      </el-form-item>
      <el-form-item label="应付款金额" prop="paytotal">
        <span class="spanToInput">{{(form.backAmount-0).toFixed(2)}}</span>
      </el-form-item>
      <el-form-item label="实付款金额" prop="paidAmount">
        <el-input v-model="form.paidAmount" type="number"></el-input>
      </el-form-item>
      <el-form-item label="核销金额" prop="checkedAmount">
        <span class="spanToInput">{{(form.checkedAmount-0).toFixed(2) }}</span>
      </el-form-item>
      <el-form-item label="备注" prop="nickName">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitFn('form')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import uploadImg from "@/components/UploadImg/index";
import newUpload from "@/components/imgUpload/index";
import paylist from "@/api/paylist";

export default {
  data() {
    // 正整数
    const numberReg = (rule, value, callback) => {
      const reg = /^\d{1,}$/;
      if (!value) {
        return callback(new Error("请输入金额"));
      } else if (!reg.test(value) || value > this.form.paytotal) {
        callback(new Error("输入金额在0到应付款金额之间"));
      } else {
        callback();
      }
    };
    return {
      form: {
        repaymentId: 0, //回款单id
        paidCard: "", //支付卡号
        receivableAmount: "", //退款金额
        paidRatio: "", //回款比例
        amount: "", //应退金额
        paidAmount: 0, //实际付款金额
        checkedAmount: "", //核销金额
        remark: "" //备注
      },
      options: [
        {
          value: "1",
          label: "光大银行 38370188000210685"
        },
        {
          value: "2",
          label: "光大银行 6226661401701333"
        }
      ],
      rules: {
        paidAmount: [{ required: true, validator: numberReg, trigger: "blur" }],
        paidCard: [
          { required: true, message: "请选择支付银行卡", trigger: "change" }
        ]
      }
    };
  },
  watch: {
    form: {
      handler(value) {
        console.log(value.paidAmount);
        this.form.checkedAmount = value.backAmount - value.paidAmount + "";
      },
      deep: true
    }
  },
  mounted() {
    // // 省市区数据获取
    // var addData = require('../../../../static/address/area.json')
    // this.options = addData
    this.form.repaymentId = this.$route.query.userId - 0;
    this.detail();
  },
  methods: {
    detail() {
      paylist.detail({ id: this.$route.query.userId }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.form.hospitalName = res.data.data.hospitalName;
          this.form.amount = res.data.data.amount;
          this.form.backAmount = res.data.data.backAmount;
          this.form.ratio = res.data.data.ratio;
          this.form.repaymentSn = res.data.data.repaymentSn;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },

    // 立即提交
    submitFn(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          console.log(this.form);
          if (this.form.checkedAmount < 0) {
            this.$message({
              type: "warning",
              message: "核销金额不能小于0"
            });
            return false;
          }
          paylist.payment(this.form).then(res => {
            this.$message({
              type: "warning",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.$router.go(-1);
            }
          });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0.1px !important;
}
.form {
  margin-left: 20px;
}
</style>
